<template>
  <a-card
    :bordered="false"
    size="small"
    :bodyStyle="{
      overflow: 'auto',
      height: 'calc(100vh - 200px)',
    }"
  >
    <a-spin :spinning="spinning">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{ width: '100%' }"
        layout="vertical"
        v-bind="{}"
        :colon="true"
        labelAlign="right"
      >
        <a-row style="height: 100%">
          <a-col :span="24">
            <a-form-model-item prop="tables" v-bind="{}">
              <span slot="label"
                >选择数据表<a style="margin-left:10px;" @click="getTables"
                  ><a-icon type="reload"/></a
              ></span>
              <a-checkbox-group v-model="formData.tables" :disabled="false">
                <a-checkbox
                  v-for="(opt, idx) in tableName_options"
                  :key="idx"
                  :value="opt.tableName"
                >
                  {{ opt.tableComment }}({{ opt.tableName }})
                </a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="12">
                <a-form-model-item
                  prop="contextPath"
                  label="映射跟地址"
                  v-bind="{}"
                >
                  <a-input
                    v-model="formData.contextPath"
                    placeholder="/api"
                    :allowClear="true"
                    size="default"
                    :disabled="false"
                  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item
                  prop="projectPath"
                  label="项目跟路径"
                  v-bind="{}"
                >
                  <a-input
                    @change="projectPathChange"
                    v-model="formData.projectPath"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="12">
                <a-form-model-item label="项目跟包名" v-bind="{}">
                  <a-input
                    @change="packageNameChange"
                    v-model="formData.packageName"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"
                  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="开发者名称" prop="author" v-bind="{}">
                  <a-input
                    v-model="formData.author"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"
                  ></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ span: 20, offset: 0 }">
              <a-button
                v-if="true"
                :loading="confirmLoading"
                type="primary"
                @click="handleOk"
              >
                确认生成
              </a-button>
              <!-- <a-button v-if="true" style="margin-left: 10px;" @click="onReset">
                取消
              </a-button> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import storage from 'store'
import { getTableInfos, createLocal } from '@/api/generator'
export default {
  components: {},
  props: [],
  data() {
    return {
      spinning: true,
      confirmLoading: false,
      defaultFormData: {
        tables: '',
        projectPath: '',
        contextPath: '',
        author: '',
        packageName: ''
      },
      formData: {},
      rules: {
        tables: [
          {
            required: true,
            message: '数据表不能为空',
            trigger: 'change'
          }
        ],
        contextPath: [
          {
            required: true,
            message: '映射跟地址不能为空',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '映射跟地址最大长度不能大于20',
            trigger: 'blur'
          }
        ],
        projectPath: [
          {
            required: true,
            message: '项目跟路径不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '项目跟路径最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        author: [
          {
            required: true,
            message: '作者名称不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '作者名称最大长度不能大于255',
            trigger: 'blur'
          }
        ],
        packageName: [
          {
            required: true,
            message: '包名不能为空',
            trigger: 'blur'
          },
          {
            max: 255,
            message: '包名最大长度不能大于255',
            trigger: 'blur'
          }
        ]
      },
      tableName_options: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.spinning = false
    this.formData = Object.assign({}, this.defaultFormData)
    const formData = storage.get('formData')
    if (formData) {
      this.formData = Object.assign({}, formData)
    }
  },
  methods: {
    handleOk() {
      // this.confirmLoading = true
      this.$refs['myForm'].validate((valid) => {
        if (!valid) {
          console.log('error')
          this.confirmLoading = false
        } else {
          const dataSource = storage.get('datasource')
          if (!dataSource) {
            this.$message.error('请先配置数据源')
            return
          }

          /* 缓存数据 */
          storage.set('formData', this.formData)
          createLocal({
            ...this.formData,
            dataSource: dataSource
          }).then((res) => {
            if (res.code === 1) {
              this.$message.success('生成完成')
            }
            this.confirmLoading = false
          })
        }
      })
    },
    onReset() {
      this.$refs['myForm'].resetFields()
      this.hideModal()
    },
    init() {
      this.getTables()
    },
    getTables() {
      const data = storage.get('datasource')
      if (data) {
        getTableInfos(data).then((res) => {
          if (res.code === 1) {
            this.tableName_options = res.data
            this.$message.success('加载完成')
          }
        })
      } else {
        this.$message.error('请先配置数据源')
      }
    },
    packageNameChange(e) {
      const value = e.target.value
      console.log(value)
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
